<!--
 * @Author: your name
 * @Date: 2020-11-20 16:59:58
 * @LastEditTime: 2021-02-24 15:25:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\pages\about\index.vue
-->
<template>
  <div class="w1200auto">
    <bread-crumb class="mb10" :breadcrumbTtem="breadcrumbTtem" />
    <banner :bannerImg="require('~/assets/image/about/about_1.png')">
      <template v-slot:txt>
        <article class="absolute banner_about text_l article">
          <h1 class="size36 lh14 b cfff">{{$t('About Eyecedar')}}</h1>
        </article>
      </template>
    </banner>
    <div class="brand_nav" ref="nav">
        <ul class="brand_nav_ul s7">
            <li class="ptb10 text_c brand_nav_li" :class="{'link_actuve': currentIndex === 0 }" data-index="0"><div class="ptb10 size16 b pointer gradients" @click="toDom(0)">{{$t('Our Story')}}</div></li>
            <li class="ptb10 text_c brand_nav_li" :class="{'link_actuve': currentIndex === 1 }" data-index="0"><div class="ptb10 size16 b pointer block gradients" @click="toDom(1)">{{$t('Mission')}}</div></li>
            <li class="ptb10 text_c brand_nav_li" :class="{'link_actuve': currentIndex === 2 }" data-index="1"><div class="ptb10 size16 b pointer block gradients" @click="toDom(2)">{{$t('Design')}}</div></li>
            <li class="ptb10 text_c brand_nav_li" :class="{'link_actuve': currentIndex === 3 }" data-index="2"><div class="ptb10 size16 b pointer block gradients" @click="toDom(3)">{{$t('Product')}}</div></li>
            <li class="ptb10 text_c brand_nav_li" :class="{'link_actuve': currentIndex === 4 }" data-index="3"><div class="ptb10 size16 b pointer block gradients" @click="toDom(4)">{{$t('Service')}}</div></li>
        </ul>
    </div>
    <div class="nav_content nav_content_active mt50" ref="brandOne">
        <div class="brand_mission brand_content">
            <div class="brand_panel ptb30 plr30 mb50">
                <h3 class="size18 b cfff mb10 lh15">{{$t('Eyecedar is a professional online retailer of glasses. With a complete production design supply chain, ')}}</h3>
                <p class="size18 b cfff mb10 lh15">{{$t('it can provide a full range of eyewear products to meet the needs of different occasions.')}}</p>
                <p class="size18 b cfff mb10 lh15">{{$t("Relying on the industrial advantages of the world's glasses  manufacturing base, we provide high-quality glasses products at very competitive prices.")}}</p>
                <p class="size18 b cfff mb10 lh15">{{$t("Provide the most affordable glasses and the best quality optical lenses.")}}</p>
                <p class="size18 b cfff mb10 lh15">{{$t("Provide safe and convenient online order glasses service.")}}</p>
                <p class="size18 b cfff mb10 lh15">{{$t("We are committed to designing and manufacturing high-quality glasses products and providing professional and reliable services.")}}</p>
                <p class="size18 b cfff mb10 lh15">{{$t("We provide satisfactory and excellent customer support at any time  ensure that all customers will get the best customer experience.")}}</p>
            </div>
            <div class="brand_matters mb50">
                <h2 class="text_c size30 b mb30">{{$t("What do you care about?")}}</h2>
                <div class="matters_icons mlr0 flex">
                    <div class="s2 text_c pl5 pr5">
                        <div class="matters_img mb10">
                          <img v-lazy="require('~/assets/image/about/about_2.png')" alt="" />
                        </div>
                        <h4 class="text_c b mb10">{{$t("100% Satisfaction")}}</h4>
                        <p class="size12 lh14">
                            {{$t("We offer no-hassle 30-day returns on all orders.")}}
                            {{$t("You have thirty (30) days from the date you receive ")}}
                            {{$t("the glasses to call us or email for a return request,")}}
                            {{$t("if you want to return them for any reason.")}}
                        </p>
                    </div>
                    <div class="s2 text_c pl5 pr5">
                        <div class="matters_img mb10">
                          <img v-lazy="require('~/assets/image/about/about_3.png')" alt="" />
                        </div>
                        <h4 class="text_c b mb10">{{$t("Customer Support")}}</h4>
                        <p class="size12 lh14">
                            {{$t("Our professional customer service team")}}
                            {{$t("will answer any questions about")}}
                            {{$t("purchase and after-sales at any time.")}}
                        </p>
                    </div>
                    <div class="s2 text_c pl5 pr5">
                      <div class="matters_img mb10">
                        <img v-lazy="require('~/assets/image/about/about_4.png')" alt="" />
                      </div>
                        <h4 class="text_c b mb10">{{$t("Quality Warranty")}}</h4>
                        <p class="size12 lh14">
                            {{$t("We carefully select each pair of glasses for you, ")}}
                            {{$t("and provide 2 years of quality repair service.")}}
                        </p>
                    </div>
                    <div class="s2 text_c pl5 pr5">
                        <div class="matters_img mb10">
                          <img v-lazy="require('~/assets/image/about/about_5.png')" alt="" />
                        </div>
                        <h4 class="text_c b mb10">{{$t("Easy to buy")}}</h4>
                    </div>
                    <div class="s2 text_c pl5 pr5">
                        <div class="matters_img mb10">
                          <img v-lazy="require('~/assets/image/about/about_6.png')" alt="" />
                        </div>
                        <h4 class="text_c b mb10">{{$t("Virtual try-on")}}</h4>
                        <p class="size12 lh14">
                            {{$t("Use our online try-on system,")}}
                            {{$t("upload your photo in all product lists,")}}
                            {{$t("you can get the wearing effect in real time")}}
                            {{$t("and help you choose glasses style.")}}
                        </p>
                    </div>
                    <div class="s2 text_c pl5 pr5">
                        <div class="matters_img mb10">
                          <img v-lazy="require('~/assets/image/about/about_8.png')" alt="" />
                        </div>
                        <h4 class="text_c b mb10">{{$t("Fast delivery")}}</h4>
                        <p class="size12 lh14">
                            {{$t("We deliver glasses directly to your door with")}}
                            {{$t("most orders arrival within 7 days.")}}
                        </p>
                    </div>
                </div>
            </div>
            <div class="brand_category mb50">
                <h3 class="size30 b text_c mb20 plr10">{{$t("Product category")}}</h3>
                <p class="size18 b text_c mb60 plr10">{{$t("We can provide a full range of eyewear products for every different occasion")}}</p>
                <ul class="brand_category_glasses">
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_9.png')" alt="">
                        <div class="size14 b">{{$t("Single vision")}}</div>
                    </li>
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_10.png')" alt="">
                        <div class="size14 b">{{$t("Blue light blocking glasses")}}</div>
                    </li>
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_9.png')" alt="">
                        <div class="size14 b">{{$t("Progressive glasses")}}</div>
                    </li>
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_11.png')" alt="">
                        <div class="size14 b">{{$t("Prescription sunglasses")}}</div>
                    </li>
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_12.png')" alt="">
                        <div class="size14 b">{{$t("Sports glasses")}}</div>
                    </li>
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_13.png')" alt="">
                        <div class="size14 b">{{$t("Safety goggles")}}</div>
                    </li>
                    <li class="text_c brand_category_li">
                        <img class="mb10" v-lazy="require('~/assets/image/about/about_11.png')" alt="">
                        <div class="size14 b">{{$t("Photochromic")}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="brand_design brand_content pt120">
            <h3 class="size30 b text_c mb50">{{$t("Frames Design")}}</h3>
            <div class="brand_design_box">
                <div class="brand_design_left mr80">
                    <img class="mb80" v-lazy="require('~/assets/image/about/about_14.png')" alt="">
                    <img v-lazy="require('~/assets/image/about/about_15.png')" alt="">
                </div>
                <div class="brand_design_right ptb20">
                    <p class="size14 b mb10 lh15">{{$t("Each pair of our glasses comes from our experimental design room,")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("where design inspiration combined with popular elements will turn into a design drawing,")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("and then be implemented on a new frame.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("Our spectacle frames are manufactured using the highest quality materials.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("From the beginning of custom-made acetate raw materials, to the molding of the raw materials,")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("then cutting, cleaning, polishing and assembling them together,")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("a pair of new spectacles samples are presented.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("Then our laboratory will evaluate and check the samples,")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("including the design style, frame size, color matching, etc.,")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("and combine the design inspiration to find the best way to achieve this pair of new frame samples.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("When we evaluate and complete these new samples, we can start mass production.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("We strictly require every production process to ensure that we can provide high-quality")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("and satisfactory products to our customers.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("Our design laboratory keeps abreast of popular trends and strives to design")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("the latest and most fashionable products to meet customer needs.")}}</p>
                    <p class="size14 b mb10 lh15">{{$t("We are committed to providing a quality product and good product experience.")}}</p>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "~/components/common/Breadcrumb";
import Banner from '~/components/common/Banner';
import { spliteParams } from '~/utils/Utils';
export default {
    async asyncData({ req, params, query, route, store }) {
      // 获取路由层级
      let arr = await spliteParams(route.fullPath);
      return {
        breadcrumbTtem: arr || []
      }
    },
    data() {
      return {
        currentIndex: 0,
        scroll: '',
        brandOneEl: ''
      }
    },
    components: {
      BreadCrumb,
      Banner
    },
    watch: {
      $route(to, from) {
        if(to.fullPath !== from.fullPath) {
          this.breadcrumbTtem = spliteParams(to.fullPath);
        }
      }
    },
    methods: {
      // 滚动到指定元素
      toDom(num) {
        const el = document.getElementsByClassName("brand_content");
        let isFix = this.$refs.nav.classList.contains("brand_nav_fix")
        if(!isFix) {
          this.$refs.nav.classList.add('brand_nav_fix')
        }
        this.currentIndex = num
        let index = 0;
        index = num <= 1 ? 0 : num - 1
        document.documentElement.scrollTop = el[index].offsetTop - 80
      },
      // 监听滚动
      eventScroll() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        if((this.scroll + 80) < this.brandOneEl.offsetTop) {
          this.$refs.nav.classList.remove('brand_nav_fix')
        }
      }
    },
    mounted() {
      window.addEventListener('scroll', this.eventScroll)
      this.brandOneEl = this.$refs.brandOne
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.eventScroll)
    }
}
</script>

<style lang="scss" scoped>
	.banner_about {
		left: calc(50% - 137px);
		top: calc(50% - 25px);
	}
    .brand_nav_ul {
        width: 60%;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .link_actuve {
        border-bottom: 2px solid #333;
    }
    .brand_banner_txt {
        left: calc(50% - 135px);
        color: #fff;
        top: calc(50% - 28px);
    }
    .brand_panel {
        background-color: #35cdf3;
    }
    .brand_design_box,
    .brand_category_glasses {
        display: flex;
    }
    .brand_design_right,
    .brand_category_li {
        flex-grow: 1;
    }
    .brand_design_left {
        width: 600px;
    }
    .brand_nav_fix {
        position: fixed;
        top: 90px;
        width: 100%;
        margin: 0 auto;
        left: 0;
        background: #fff;
        box-shadow: 0 0 3px 1px rgba(3,3,3,.5);
        padding: 10px;
    }
    .matters_img {
      height: 130px;
    }
</style>
